import React, {Component}      from 'react';
import {
    StyleSheet,
    View,
    ListView,
    Dimensions,
    Text,
    Image,
    TouchableOpacity
}from 'react-native';
import BaseNavigationBar       from '../../views/BaseNavigationBar';
import LoadingView             from '../../views/LoadingView';
import StorageUtil             from "../../utils/StorageUtil";
import * as BaseAPI            from "../../utils/BaseAPI";
import Toast, {DURATION}       from 'react-native-easy-toast';
const {width,height} = Dimensions.get('window');

export default class RecordsScreen extends Component {

    constructor(props){
        super(props);
        this.state = {
            noData:'',
            showProgress:false,
            dataSource : new ListView.DataSource(
                { rowHasChanged: (r1, r2) => r1.uuid !== r2.uuid }),
        };
    }

    componentWillMount() {
        StorageUtil.get('token',(error,object)=>{
            if (!error && object != null)
            {
                this.getGameHistoryData(object.token);
            }
        });
    }

    // 获取试玩记录数据
    getGameHistoryData(token){
        this.setState({showProgress:true});
        fetch(BaseAPI.GetGameHistoryDataUrl+token+"&page=1", {
            method:'GET'
        }).then((res)=>res.json())
            .then((json)=>{
                this.setState({showProgress:false});
                if (json.ret === 0){
                    var data =json.list.length ;
                    if (json.list.length === 0){
                        this.setState({noData:true});
                    } else {
                        this.setState({noData:false});
                        this.setState({
                                    dataSource:this.state.dataSource.cloneWithRows(json.list)
                        });
                    }
                } else {
                    this.refs.toast.show('获取试玩记录数据失败');
                }
            })
            .catch((e)=>{
                this.setState({showProgress:false});
                this.refs.toast.show('网络请求出错：'+e);
            })
    }

    popToBack(){
        // this.props.navigation.goBack()
        this.props.navigator.pop();
    }

    // 继续试玩
    goPlayGame(rowData){
        this.refs.toast.show('进入尤其');
    }

    renderRow(rowData){

        console.log('网络请求地址9啊'+ rowData + JSON.stringify(rowData));

        return (
            <View style = {styles.cellViewStyle}>
                <View style={{flexDirection:'column',width:width*3/4-20,height:0.56*100}}>
                    <View style={styles.leftViewStyle}>
                        <Image style={{width:0.56*88,height:0.56*88}} source={{url:rowData.icon}}/>
                        <Text style={styles.titleStyle}>{rowData.name}</Text>
                    </View>
                    <Text style ={styles.detailTitleStyle}>{rowData.remark}</Text>
                </View>
                <TouchableOpacity activeOpacity={1} onPress={()=>{this.goPlayGame(rowData)}}>
                    <View style={{flexDirection:'row',height:160*0.56,justifyContent:'center',alignItems:'center'}}>
                        <Text style={styles.titleStyle}>继续试玩</Text>
                        <Image style={{width:14,height:15,marginRight:10}} source={require('../../../images/my/recordNext.png')}/>
                    </View>
                </TouchableOpacity>

            </View>
        )
    }

    renderFooterView(){
        return (
            <View style={{width: width, height:40}}/>
        )
    }

    render() {
        return (
            <View style={styles.container}>
                <BaseNavigationBar
                    title={'试玩记录'}
                    leftImageSource={require('../../../images/other/ic_back.png')}
                    leftItemFunc={() => this.popToBack()}/>

                <ListView
                    showsVerticalScrollIndicator={false}
                    dataSource={this.state.dataSource}
                    renderRow={this.renderRow.bind(this)}
                    renderFooter={this.renderFooterView}
                />


                {this.state.noData?(<View style={styles.noDataViewStyle}>
                    <Image style={{width:90,height:60}}
                           source={require('../../../images/other/pic_noData.png')}/>
                    <Text style={{fontSize:13,color:'#c2c2c2',marginTop:10}}>这里暂时没有什么东西</Text>
                </View>):(null)}

                <Toast ref="toast" position='center'/>

                {this.state.showProgress?(<LoadingView cancel={()=> this.setState({showProgress:false})}/>):(null)}

            </View>
        );
    }
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        backgroundColor:'#f0f0f0'
    },
    cellViewStyle:{
        backgroundColor:'white',
        height:0.56*160,
        flexDirection:'row',
        marginTop:1
    },
    leftViewStyle:{
        flexDirection:'row',
        marginLeft:0.56*24,
        height:0.56*88,
        marginTop:0.56*16,
        alignItems:'center'
    },
    noDataViewStyle:{
        width:width,
        height:height,
        justifyContent:'center',
        alignItems:'center'
    },
    titleStyle:{
       fontSize:15,
        // marginLeft:0.56*24,
        // marginTop:0.56*20,
        color:'#353535',
        marginRight:5
    },
    detailTitleStyle:{
        fontSize:10,
        marginLeft:0.56*24,
        marginTop:0.56*20,
        color:'#909090'
    }
});
